﻿@{
    Layout = null;
}
<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扁平风格垂直手风琴UI设计|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>

    <script src="~/Scripts/jquery-2.1.1.min.js"></script>
    <script src="~/Scripts/Level/jquery.levelup.js"></script>
    <script src="~/Scripts/layer_mobile/layer.js"></script>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <link href="~/Content/layui/css/hero.css" rel="stylesheet" />

    <style>
        .floatAddFont
        {
            color: #A8FF24;
            font-size: 17px;
            -webkit-text-stroke: 1px black;
            letter-spacing: 0.04em;
        }

        .floatAddBaoJiFont
        {
            color: #A8FF24;
            font-size: 40px;
            -webkit-text-stroke: 1px black;
            letter-spacing: 0.04em;
        }

        .floatJianBaoJiFont
        {
            color: green;
            font-size: 40px;
            -webkit-text-stroke: 1px black;
            letter-spacing: 0.04em;
        }

        .floatJianFont
        {
            color: red;
            font-size: 23px;
            -webkit-text-stroke: 1px black;
            letter-spacing: 0.04em;
        }

        .guai
        {
            position: relative;
            height: 60px;
            height: 60px;
        }

        #guaiScreen
        {
            text-align: center;
        }

        #roleScceen
        {
            position: fixed;
            bottom: 21%;
            left: 0;
            width: 100%;
        }

        #zhujiao
        {
            width: 70px;
            height: 70px;
        }


        #skillScceen
        {
            position: fixed;
            bottom: 0;
            /*height: 20%;*/
            left: 0;
        }

        #roleSkills
        {
            float: left;
            list-style: none;
            padding-left: 0px;
        }

            #roleSkills li
            {
                float: left;
                width: 19%;
                border: 1px solid #ccc;
                position: relative;
            }

                #roleSkills li span
                {
                }

                    #roleSkills li span img
                    {
                        width: 40px;
                        height: 40px;
                        cursor: pointer;
                    }

        .zhujiaoBeidong_bingdun
        {
            box-shadow: inset -1px 1px 4px 2px #b6ff00, inset 1px -1px 4px 2px #b6ff00;
            border-radius: 50%;
            -webkit-animation: bingdun linear 2s 1.3s infinite;
            -moz-animation: bingdun linear 2s 1.3s infinite;
            animation: bingdun linear 2s 1.3s infinite;
        }

        .cdtime
        {
            position: absolute;
            width: 40px;
            height: 40px;
            text-align: center;
            background: #EEDFCC;
            left: 0;
            top: 0;
            line-height: 40px;
            font-size: 20px;
            color: #FF8C00;
            background-color: rgba(0,0,0,0.5);
        }








        .resultMsg
        {
            line-height: 32px;
        }

        .resultRole
        {
        }

            .resultRole span
            {
                font-family: verdana, sans-serif;
                color: #471F02;
                font-size: 19px;
                font-weight: bold;
                word-spacing: 0pt;
            }

        .resultProp
        {
        }

            .resultProp span
            {
                font-family: verdana, sans-serif;
                color: #148F04;
                font-size: 15px;
                font-weight: bold;
            }
            .resultProp img
            {
                width:25px;
                height:25px;
            }   

        .roleLevel span
        {
            font-family: verdana, sans-serif;
            color: #659104;
            font-size: 23px;
            font-weight: bold;
        }
    </style>
    <!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
    <input type="button" id="fight" value="战斗" />
    <div class="layui-m-layerchild  layui-m-anim-up" style="position: fixed; left: 0; top: 0; width: 100%; height: 100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s; overflow: auto;  background-size:100%100%;   background-image: url('/Images/resultbg.png')">
        <div class="layui-m-layercont">

            <div class="resultMsg">
                <div class="resultShow">
                    <img src="/Images/shibai.png" />
                </div>

                <div class="resultRole">
                    <p>
                        <img height="20" width="20" src="/Images/jingyan.png" />
                        <span>获得400经验</span>
                    </p>
                    <p>
                        <img height="20" width="20" src="/Images/jingyan.png" />
                        <span>获得500历练值</span>
                    </p>
                    <p>
                        <img height="20" width="20" src="/Images/jinbi.png" />
                        <span>获得230个金币</span>
                    </p>
                </div>
                <div class="roleLevel">
                    <img height="20" width="20" src="/Images/shengji.png" />
                    <span>角色升到9级</span>
                </div>
                <div class="resultProp">
                    <p>
                        <img src="http://192.168.39.75:8028/GameProImages/prop/hongbaoshi.gif" />
                        <span>红宝石x2</span>

                    </p>
                    <p>
                        <img src="http://192.168.39.75:8028/GameProImages/prop/wuqi.gif" />
                        <span>基础大剑x1</span>
                    </p>
                    <p>
                        <img src="http://192.168.39.75:8028/GameProImages/prop/shengniunai.png" />
                        <span>剩牛奶x4</span>
                    </p>
                </div>
                <div>
                    <a><img src="/Images/queding.png"/></a>
                </div>
            </div>
        </div>


    </div>
</body>
</html>

<script>


    //$(document).ready(function () {
    //    Manager.Instance.Init();
    //    FloatTextClass.InitObj();
    //});


    //(function () {
    //    Manager = {};
    //    var guaiArr = [];
    //    var _publicCd = true;
    //    Manager.Instance = {
    //        Init: function () {
    //            $(document).on('click', '.jineng', this.JinengActick);
    //        },
    //        //技能整合
    //        JinengActick: function () {
    //            var jinengId = $(this).attr("jinengId");
    //            //判断当前技能是否在冷却时间和公共CD时间
    //            if ($("#cd_" + jinengId + "").length > 0 || !_publicCd) {
    //                return false;
    //            }
    //            Manager.Instance.InitGuai();
    //            //FloatTextClass.FloatNum($("#zhujiao"), 100, 1);
    //            var texiaoType = $(this).attr("texiaoType");
    //            var jinengName = $(this).attr("jinengName");
    //            var jinengCd = $(this).attr("cdtime");
    //            var picType = $(this).attr("picType");
    //            Manager.Instance.TriggerPublicCd(1000);
    //            Manager.Instance.ShowCd(jinengId, jinengCd);
    //            switch (texiaoType) {
    //                case "1"://单体技能攻击，有路径
    //                    var guai = guaiArr[0];
    //                    var jineng = new JiNeng(jinengName, 1000, guai, jinengId, picType);
    //                    jineng.CreateModel();
    //                    jineng.Move();
    //                    break;
    //                case "2": //群体技能攻击，分散，有路径
    //                    for (var i = 0; i < guaiArr.length; i++) {
    //                        var jineng = new JiNeng(jinengName, 1000, guaiArr[i], jinengId, picType);
    //                        jineng.CreateModel(i + 1000);
    //                        jineng.Move(i);
    //                    }
    //                    break;
    //                case "3":////群体技能攻击，不分散，有路径
    //                    var jineng = new JiNeng(jinengName, 1000, guaiArr[1], jinengId, picType);
    //                    jineng.CreateModel();
    //                    jineng.MoveBig();
    //                    break;
    //                case "4"://单体技能攻击，无路径，直接怪物脚下出来
    //                    var guai = guaiArr[0];
    //                    var jineng = new JiNeng(jinengName, 1000, guai, jinengId, picType);
    //                    jineng.CreateModelTarget();
    //                    jineng.MoveTarget();
    //                    break;
    //                case "5"://群体技能攻击，无路径，直接从脚下出来
    //                    for (var i = 0; i < guaiArr.length; i++) {
    //                        var jineng = new JiNeng(jinengName, 1000, guaiArr[i], jinengId, picType);
    //                        jineng.CreateModelTarget(i);
    //                        jineng.MoveTarget();
    //                    }
    //                    break;
    //            }
    //        },
    //        InitGuai: function () {
    //            guaiArr = [];
    //            //怪物初始化
    //            $(".guai").each(function () {
    //                guaiArr.push(new Guai($(this).attr("id")));
    //            })
    //        },
    //        //冷却时间
    //        ShowCd: function (jid, ct) {
    //            var cdHtml = '<div class="cdtime" id="cd_' + jid + '">' + ct + '</div>';
    //            $("#skill" + jid + "").after(cdHtml);
    //            var cdObj = $("#cd_" + jid + "");
    //            setInterval(function () {
    //                var restTime = parseInt(cdObj.html()) - 1;
    //                if (restTime == 0) {
    //                    cdObj.remove();
    //                    clearInterval(this);
    //                } else {
    //                    cdObj.html(restTime);
    //                }
    //            }, 1000)
    //        },
    //        //公共冷却时间
    //        TriggerPublicCd: function (ptime) {
    //            _publicCd = false;
    //            setTimeout(function () {
    //                _publicCd = true;
    //            }, ptime)
    //        }
    //    };
    //})();

    //(function () {
    //    FloatTextClass = new FloatText();
    //    //战斗文字浮动类
    //    function FloatText() {
    //        //需要浮动战斗文字的对象注册
    //        var _self = this;
    //        function _init() {
    //            _self.InitObj = InitObj;
    //            _self.FloatNum = FloatNum;
    //        }
    //        function InitObj() {
    //            var args = GetALLObj();
    //            $.each(args, function (index, obj) {
    //                obj.levelup({
    //                    'start': 0,
    //                    'incrementer': { 'class': 'floatAddFont' },
    //                    'decrementer': { 'class': 'floatJianFont' },
    //                });
    //            })
    //        };
    //        //浮动文字
    //        function FloatNum(obj, num, type) {
    //            if (type == 1)//加
    //                obj.levelup('increment', num);
    //            else
    //                obj.levelup('decrement', num);
    //        };
    //        //获取当前所有怪和角色的对象
    //        function GetALLObj() {
    //            var objArr = [];
    //            $(".guai").each(function () {
    //                objArr.push($(this));
    //            })
    //            objArr.push($("#zhujiao"));
    //            return objArr;
    //        }
    //        _init();
    //    };


    //})()
    ////猪脚模型
    //function ZhuJiao() {
    //    this.X = $('#zhujiao').offset().left;
    //    this.Y = $('#zhujiao').offset().top;
    //    return this;
    //}
    ////怪模型
    //function Guai(o) {

    //    this.X = $("#" + o).offset().left;
    //    this.Y = $("#" + o).offset().top;

    //    this.JqueryObj = $("#" + o);
    //    this.Distory = function () {
    //        this.JqueryObj.hide(20, function () {
    //            this.JqueryObj.remove();
    //        })
    //    }
    //    this.Shake = function () {
    //        box_left = 0;
    //        for (var i = 1; 3 >= i; i++) {
    //            this.JqueryObj.animate({ left: box_left - (20 - 5 * i) }, 30);
    //            this.JqueryObj.animate({ left: box_left + (20 - 5 * i) }, 30);
    //        }
    //    }
    //    return this;
    //}

    ////技能模型，有路径
    //function JiNeng(name, speed, guai, id, picType) {
    //    this.Path = "/Images/" + name + "." + picType;
    //    this.Speed = speed;
    //    this.Id = id;
    //    this.X = $("#zhujiao").offset().left;
    //    this.Y = $("#zhujiao").offset().top,
    //    this.JinengObj = undefined;
    //    //有路径移动创建技能
    //    this.CreateModel = function (n) {
    //        var guid = Guid();

    //        $("#role_progess").before('<img id="jineng_texiao_' + id + '_' + guid + '" src="' + this.Path + '" style="z-index: ' + n + ';position: absolute;top: -87px;left: 113px;">');
    //        this.JinengObj = $("#jineng_texiao_" + id + "_" + guid);

    //    }
    //    //脚下创建技能，无路径
    //    this.CreateModelTarget = function (i) {
    //        var guid = Guid();
    //        var left = "14%";
    //        if (i == 1)
    //            left = "41%";
    //        else if (i == 2)
    //            left = "69%";
    //        guai.JqueryObj.after('<div id="jineng_texiao_' + id + '_' + guid + '" style="z-index: 9999;margin-top: -' + guai.JqueryObj.height() + ';display:;position: absolute;left: ' + left + ';top: 11%;"><img height="70";width="70"  src="' + this.Path + '" ><div>');
    //        this.JinengObj = $("#jineng_texiao_" + id + "_" + guid);

    //    }
    //    //移动特效1，移动过程不变大
    //    this.Move = function (i) {
    //        if (i != 1)
    //            this.JinengObj.animate({ top: guai.Y - this.Y + 30, left: guai.X - this.X + 100 }, 500, function () {
    //                guai.Shake();
    //                FloatTextClass.FloatNum(guai.JqueryObj, 100, 2);
    //            });//
    //        else
    //            this.JinengObj.animate({ top: guai.Y - this.Y + 30 }, 500, function () {
    //                guai.Shake();
    //                FloatTextClass.FloatNum(guai.JqueryObj, 100, 2);
    //            });//

    //        Distory(this.JinengObj);
    //    }
    //    //移动特效2，直线过去，左右冲击
    //    this.MoveBig = function () {
    //        this.JinengObj.animate({ top: -this.Y + 60 }, 500);
    //        for (var i = 0; i < 3; i++) {
    //            this.JinengObj.animate({ left: -$("#guaiScreen").width() / 2 }, 100);
    //            this.JinengObj.animate({ left: $("#guaiScreen").width() }, 100);
    //        }

    //        this.JinengObj.animate({
    //            left: $("#guaiScreen").width()

    //        }, 500, function () {
    //            //群体技能，所有怪抖动，正式项目中，抖动后，会判读血条，并且动态处理后续逻辑
    //            $(".guai").each(function () {
    //                new Guai($(this).attr("id")).Shake();
    //                FloatTextClass.FloatNum($(this), 100, 2);
    //            })
    //        })

    //        Distory(this.JinengObj)
    //    }
    //    //无路径移动特效
    //    this.MoveTarget = function () {
    //        this.JinengObj.show(500)
    //        this.JinengObj.hide(500, function () {
    //            guai.Shake();
    //            FloatTextClass.FloatNum(guai.JqueryObj, 100, 2);
    //        })
    //        Distory(this.JinengObj)
    //    }
    //    return this;
    //}
    //JiNeng.prototype = {
    //    X: $("#zhujiao").offset().left,
    //    Y: $("#zhujiao").offset().top,
    //    JinengObj: undefined
    //};

    //function Distory(obj) {
    //    obj.hide(20, function () {
    //        obj.remove();
    //    })
    //}

    //function S4() {
    //    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    //}
    //function Guid() {
    //    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    //}
</script>











